/*首页样式*/
body{

    font-family: 'Helvetica Neue','Hiragino Sans GB',Helvetica,Arial,Sans-serif;
}
.btn{
    text-decoration: none;
    margin: 0px;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    border-radius: 3px;
    text-align: center;
    display: inline-block;
    min-width: 80px;
    color: #fff;
    background-color: #3493FF;

}



/*代码工具样式*/
.code{
    float: left;
    width: 40%;
}
.result{
    float: left;
    width: 29%;
    box-sizing:border-box;
}

.CodeMirror-scroll{

}
/*.code .CodeMirror,*/
.result .showresult{
    /*opacity:0.7;*/
    line-height: 1.3em;
    font-family: monospace;
    position: relative;
    overflow: hidden;
    background-color: white;
    /*height: 700px;*/
    color: #555555;
    border: 2px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
}
.code .CodeMirror-focused,.code .CodeMirror:hover,.result .showresult:hover{
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted \9;
    -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);  
}
.lef{
    float: left;
    width: 30%;
    background-color: #616161;
}
.show1{
    background-color: #616161;
}
.result .showresult{

    /*height: 1000px;*/
}
.tool{
    height: auto;
    /*text-align: center;*/

    margin-left: 3%;
}
.tool .btn{
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;

    cursor: pointer;

    border: 1px solid transparent;
    border-radius: 4px;
}
.tool .btn-copy{
    color:#fff;
    background-color:#228AFF;
}
.tool .btn-run,.tool .btn-input{
    color: #fff;
    background-color: #5cb85c;
}
.tool .btn-home{
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.tool .btn-copy:hover{
    color:#fff;
    background-color:#228AFF;
}
.tool .btn-run:hover{
    color:#fff;
    background-color:#5cb85c;
}
.tool .btn-home:hover{
    color:#333;
    background-color:#e6e6e6;
    border-color:#adadad;
}
.iframeResult{
    width: 100%;
    height:100%;
}

#run,#back,#input,#reset{
    /*position: relative;  top: 0px;  left: 0px;*/
    /*position: fixed;*/
    /*right: 0px;*/
    margin-top: 8px;
    z-index: 999;
}
/*代码工具样式结束*/

/*课程学习样式*/
.container{
    width: 30%;
    margin: auto;
}
.accordion, .accordion ul, .accordion li, .accordion a, .accordion span { 
    margin: 0; 
    padding: 0; 
    border: none; 
    outline: none; 
    text-align:left; 
} 

.accordion li { 
    list-style: none; 
} 


.accordion li > a { 
    display: block; 
    position: relative; 
    min-width: 110px; 
    padding: 0 10px 0 40px; 
    color: #fdfdfd; 
    font: bold 14px/32px 黑体,宋体; 
    text-decoration: none; 
    text-shadow: 0px 1px 0px rgba(0,0,0, .35); 
    background: #6c6e74; 
    background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51)); 
    background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%); 
    background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%); 
    background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%); 
    background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%); 
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
} 

.accordion li > a span { 
    display: block; 
    position: absolute; 
    top: 7px; 
    right: 0; 
    padding: 0 10px; 
    margin-right: 10px; 
    font: normal bold 12px/18px Arial, sans-serif; 
    background: #404247; 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); 
    -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); 
    box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1); 
} 
.accordion li.home>a:before { 
position: absolute; 
top: 0; 
left: 0; 
content: ''; 
width: 20px; 
height: 20px; 
margin: 6px 8px; 
background-repeat: no-repeat; 
background-image: url(../images/home.png); 
} 
.sub-menu{
    background: #e5e5e5;
}
.sub-menu li a { 
    font: bold 12px/32px 黑体,宋体; 
    color: #797979; 
    text-shadow: 1px 1px 0px rgba(255,255,255, .2); 
    background: #e5e5e5; 
    border-bottom: 1px solid #c9c9c9; 
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
} 
.sub-menu li:last-child a {
    border: none;
} 
.sub-menu li > a span { 
    color: #797979; 
    text-shadow: 1px 1px 0px rgba(255,255,255, .2); 
    background: transparent; 
    border: 1px solid #c9c9c9; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
} 
.sub-menu em { 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin-left: 14px; 
    color: #a6a6a6; 
    font: normal 10px/32px Arial, sans-serif; 
} 

.accordion > li:hover > a, .accordion > li:target > a { 
    color: #3e5706; 
    text-shadow: 1px 1px 1px rgba(255,255,255, .2); 
    background: #a5cd4e; 
    background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); 
    background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); 
    background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); 
    background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); 
    background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); 
} 
.accordion > li:hover > a span, .accordion > li:target > a span { 
    color: #fdfdfd; 
    text-shadow: 0px 1px 0px rgba(0,0,0, .35); 
    background: #3e5706; 
} 
.sub-menu li:hover a {
    background: #efefef; 
} 


.accordion li > .sub-menu { 
    height: 0; 
    overflow: hidden;
    -webkit-animation:close .2s ease-in-out;
    -moz-animation:close .2s ease-in-out;
    -o-animation:close .2s ease-in-out;
    -ms-animation:close .2s ease-in-out;
    animation:close 2s ease-in-out;
} 
.accordion li:target > .sub-menu {
    -webkit-animation:open 2s ease-in-out;
    -moz-animation:open 2s ease-in-out;
    -o-animation:open 2s ease-in-out;
    -ms-animation:open 2s ease-in-out;
    animation:open 2s ease-in-out;
    height: 100%;
}
@-webkit-keyframes open{
    0%   {height:0px;opacity: 1;}
    80%  {height:198px;opacity: 0.5;}
    90%  {height:132px;opacity: 0.5;}
    100% {height:198px;opacity: 1;}

}
@-moz-keyframes open{
    0%   {height:0px;opacity: 1;}
    80%  {height:198px;opacity: 0.5;}
    90%  {height:132px;opacity: 0.5;}
    100% {height:198px;opacity: 1;}

}
@-o-keyframes open{
    0%   {height:0px;opacity: 1;}
    80%  {height:198px;opacity: 0.5;}
    90%  {height:132px;opacity: 0.5;}
    100% {height:198px;opacity: 1;}

}
@-ms-keyframes open{
    0%   {height:0px;opacity: 1;}
    80%  {height:198px;opacity: 0.5;}
    90%  {height:132px;opacity: 0.5;}
    100% {height:198px;opacity: 1;}

}
@keyframes open{
    0%   {height:0px;opacity: 1;}
    80%  {height:198px;opacity: 0.5;}
    90%  {height:132px;opacity: 0.5;}
    100% {height:198px;opacity: 1;}

}
@-webkit-keyframes close{
    0%   {height:100px;opacity: 1;}
    100% {height:0px;opacity: 0;}
}
@-moz-keyframes close{
    0%   {height:100px;opacity: 1;}
    100% {height:0px;opacity: 0;}
}
@-o-keyframes close{
    0%   {height:100px;opacity: 1;}
    100% {height:0px;opacity: 0;}
}
@-ms-keyframes close{
    0%   {height:100px;opacity: 1;}
    100% {height:0px;opacity: 0;}
}
@keyframes close{
    0%   {height:100px;opacity: 1;}
    100% {height:0px;opacity: 0;}
}

@media(max-width: 800px){
    .container{
    width: 80%;
    margin: auto;
    }
    #run,#back{
        /*position: relative;  top: 0px;  left: 0px;*/
        top: 65px;
    }
}
